CMS-Entwicklung mit WYSIWYG-Modus

Will man ein webbasiertes „What-you-see-is-what-you-get“-Content-Management-System entwickeln, dann gibt es verschiedene Optionen, die man ausprobieren kann.
Die meisten webbasierten Content-Management-Systeme bauen auf standardmäßigen HTML-Formularen auf, um eine Datenbank mit den von den Benutzern eingegebenen Inhalten zu füttern. Dieses Tutorial beschäftigt sich mit verschiedenen Möglichkeiten, Textbereichselemente in Web-Formularen mit Rich-Text-Editoren zu ersetzen, die zwar den gleichen Zweck erfüllen, es den Benutzern aber ermöglichen, Inhalte im WYSIWYG-Format zu bearbeiten.

Die Microsoft-Methode

Microsoft kündigte sein DHTML Editing Component, das mit dem Internet Explorer 5 ausgeliefert wurde, bereits im Jahr 1999 an. Als Active X-Steuerelement beschränkte sich sein Einsatz auf die Windows-Versionen des Browsers, erlaubte allerdings Web-Entwicklern, mit nur wenigen Zeilen Code eine Rich-Text-Editing-Funktion in HTML-Formulare zu integrieren. Seit jener Zeit ist diese Komponente an Dutzende von kostenlosen und kommerziellen DHTML-Skripte angepasst worden, die eigens für das Management von Web-Inhalten geschrieben wurden. Die Erstellung eines solchen Skripts beginnt mit dem zum Aufruf der Komponente erforderlichen OBJECT-Tag, anschließend wird eine Reihe von Javascript-Befehlen benötigt, um weitere Funktionen hinzuzufügen. Da die DHTML-Editing-Komponente über keinerlei Symbolleisten- oder Benutzeroberflächenelemente verfügt, ist es erforderlich, dass alle Aufbereitungsarbeiten wie zum Beispiel Änderungen der Schriftart, -größe oder -farbe programmatisch durchgeführt werden.

Listing A

Dieser Code ist das Mindeste, was für die Erstellung einer Instanz des DHTML-Objekts erforderlich ist, die das hier gezeigte Ergebnis produziert. Anschließend wird die Methode ExecCommand() zum Auslösen von Ereignissen innerhalb des Editor-Objekts verwendet. Der folgende Code beispielsweise formatiert den markierten Text im Editor fett, wenn das verknüpfte „B“ angeklickt wird.

Listing B

Mit dem hier aufgeführten Code kann ein einfacher DHTML-Editor für simple Textformatierungen erstellt werden.

Listing C

Die hier verwendeten Variablen speichern die von dem Active X-Steuerelement erwarteten Konstanten. Eine komplette Liste dieser Werte befindet sich in der Datei dhtmled.js, die in Microsofts DHTML-Beispielanwendung (editcntrl.exe) enthalten ist. Diese Datei kann mit der nachstehenden Syntax in die Seite eingebunden werden:

Listing D

Indem man die in dieser Datei enthaltenen Befehle mit einer Mischung aus Javascript und Schaltflächensymbolen kombiniert, kann man eine Symbolleiste mit allen erforderlichen Funktionen eines benutzerspezifischen WYSIWYG-Editors erstellen. Das Einzige, was fehlt, ist der Code, um den Inhalt des Editors einem Formularfeld zuzuordnen, das als Teil eines HTML-Formulars übermittelt werden kann. Das kann über ein ausgeblendetes Feld im Formular erfolgen, dem der HTML-Inhalt beim Abschicken des Formulars dynamisch zugeordnet wird. Zugriff auf den Inhalt des DHTML-Steuerelements erfolgt über dessen Eigenschaft DOM.body.innerHTML, wie es in Listing E gezeigt wird.

Listing E

Offensichtlich ist die DHTML-Komponente eine sehr schnelle und einfache Methode zur Integration der WYSIWYG-Funktionalität in ein IE-basiertes Content-Management-System. Möchte oder muss man allerdings den Mozilla-Browser unterstützen, so muss man sich nach einer anderen Lösung umsehen.